<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Dashboard V.1 | Kiaalap - Kiaalap Admin Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Lobibox CSS
        ============================================ -->
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css">

    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" href="css/font-awesome.min.css">



    <!-- DatetimePicker CSS
        ============================================ -->
    <link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">

    <!-- owl.carousel CSS
		============================================ -->
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/meanmenu.min.css">
    <!-- main CSS
		============================================ -->
    <link rel="stylesheet" href="css/main.css">
    <!-- educate icon CSS
		============================================ -->
    <link rel="stylesheet" href="css/educate-custon-icon.css">
    <!-- morrisjs CSS
		============================================ -->
    <link rel="stylesheet" href="css/morrisjs/morris.css">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- metisMenu CSS
		============================================ -->
    <link rel="stylesheet" href="css/metisMenu/metisMenu.min.css">
    <link rel="stylesheet" href="css/metisMenu/metisMenu-vertical.css">
    <!-- calendar CSS
		============================================ -->
    <link rel="stylesheet" href="css/calendar/fullcalendar.min.css">
    <link rel="stylesheet" href="css/calendar/fullcalendar.print.min.css">

    <!-- form CSS
		============================================ -->
    <link rel="stylesheet" href="css/form/all-type-forms.css">

    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="css/style.css">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- modernizr JS
		============================================ -->
    <script src="js/jquery.min.js"></script>

    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="js/vue.js"></script>



</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Start Left menu area -->
<div class="left-sidebar-pro">
    <nav id="sidebar" class="">
        <div class="sidebar-header">
            <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
            <strong><a href="index.html"><img src="img/logo/logosn.png" alt=""/></a></strong>
        </div>
        <div class="left-custom-menu-adp-wrap comment-scrollbar">
            <nav class="sidebar-nav left-sidebar-menu-pro">
                <ul class="metismenu" id="menu1">
                    <li class="active">
                        <a class="has-arrow" href="index.html">
                            <span class="fa fa-id-card"></span>
                            <span class="mini-click-non">用户信息</span>
                        </a>
                        <ul class="submenu-angle" aria-expanded="true">
                            <li><a href="dataStatistics.html"><span class="mini-sub-pro">图表信息统计</span></a></li>
                            <li><a href="index.html"><span class="mini-sub-pro">用户列表</span></a></li>
                            <li><a href="goodsManager.html"><span class="mini-sub-pro">商品列表</span></a></li>
                            <li><a href="order.html"><span class="mini-sub-pro">订单管理</span></a></li>
                            <li><a href="payPage.html"><span class="mini-sub-pro">支付流水列表</span></a></li>
                            <li><a href="logManagement.html"><span class="mini-sub-pro">日志管理</span></a></li>
                            <li><a href="dataPush.html"><span class="mini-sub-pro">级光推送</span></a></li>

                        </ul>
                    </li>
                    <li>
                        <a title="Landing Page" href="sysUser.html" aria-expanded="false"><span
                                class="fa fa-user-circle-o" aria-hidden="true"></span> <span
                                class="mini-click-non">系统用户</span></a>
                    </li>

                </ul>
            </nav>
        </div>
    </nav>
</div>
<!-- End Left menu area -->
<!-- Start Welcome area -->
<div class="all-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="logo-pro">
                    <a href="index.html"><img class="main-logo" src="img/logo/logo.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-advance-area">
        <div class="header-top-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="header-top-wraper">
                            <div class="row">
                                <div class="col-lg-1 col-md-0 col-sm-1 col-xs-12">
                                    <div class="menu-switcher-pro">
                                        <button type="button" id="sidebarCollapse"
                                                class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-7 col-sm-6 col-xs-12">
                                    <div class="header-top-menu tabl-d-n">
                                        <ul class="nav navbar-nav mai-top-nav">
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                            <li class="nav-item dropdown res-dis-nn">

                                                <div role="menu" class="dropdown-menu animated zoomIn">
                                                    <a href="#" class="dropdown-item">Documentation</a>
                                                    <a href="#" class="dropdown-item">Expert Backend</a>
                                                    <a href="#" class="dropdown-item">Expert FrontEnd</a>
                                                    <a href="#" class="dropdown-item">Contact Support</a>
                                                </div>
                                            </li>
                                            <li class="nav-item"><a href="#" class="nav-link"></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                                    <div class="header-right-info">
                                        <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                            <li class="nav-item">
                                                <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                                   class="nav-link dropdown-toggle">


                                                    <span class="admin-name" id="admin-name">用户管理</span>
                                                    <span class="admin-name2" id="admin-nam2"></span>
                                                </a>
                                                <ul role="menu"
                                                    class="dropdown-header-top author-log dropdown-menu animated zoomIn">
                                                    <li><a href="sysUser.html"><span
                                                            class="edu-icon edu-home-admin author-log-ic"></span><button>管理员信息</button></a>
                                                    <li><a><span
                                                            class="edu-icon edu-settings author-log-ic"></span><button  onclick="loginOut()">切换登录</button></a>
                                                    <li><a><span
                                                            class="edu-icon edu-settings author-log-ic" ></span><button onclick="loginOut()">退出登录</button>
                                                    </a></li>

                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="showLogin" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" onclick="destoryshowLogin()">
                                <span>&times;</span>
                            </button>
                            <h3 class="modal-title"></h3>
                        </div>
                        <div class="modal-body">
                            <table id="showLoginclose" class="table table-striped"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="padding: 20px 15px 0 15px;">
                    
            <!-- 商品管理页面 -->
            <div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">


            
                <div id="goodsTableToolbar">
                    <button class="btn btn-success" onclick="showAddGoodsModal()">添加</button>
                    <button class="btn btn-primary" onclick="sureImportExcel()" >导入</button>
                    <button class="btn btn-danger" onclick="exportFile()">导出</button>
                </div>
                <table id="goodsDataTable" class="table table-bordered table-striped"></table>

                <div class="modal" id="addGoodsModal" data-backdrop="static">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button onclick="destoryAddGoodsModal()" class="close">
                                    <span>&times;</span>
                                </button>
                                <h3 class="modal-title">添加商品</h3>
                            </div>
                            <div class="modal-body">
                                <form >
                                    <input type="hidden" id="imageServerPath">
                                    <div class="form-group">
                                        <label for="title">标题</label>
                                        <input class="form-control" autocomplete="off" id="title">
                                    </div>
                                    <div class="form-group">
                                        <label for="items">种类</label>
                                        <select class="form-control" id="items">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>展示图<span style="color: red;">(在选择展示图之前必须选种类)</span></label>
                                        <div style="margin-bottom: 6px;">
                                            <img src="../images/default.png" width="158px" id="preDisplayImage" height="180px">
                                        </div>
                                        <div class="file-upload-inner file-upload-inner-right ts-forms">
                                            <div class="input append-small-btn">
                                                <div class="file-button">
                                                    Browse
                                                    <input id="displayImage" autocomplete="off" onchange="uploadDispalyImage(this)" type="file" name="avatar" >
                                                </div>
                                                <input type="text" autocomplete="off" id="append-small-btn" placeholder="no file selected">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="price">价格</label>
                                        <input class="form-control" autocomplete="off" id="price">
                                    </div>
                                    <div class="form-group">
                                        <label for="stock">库存</label>
                                        <input class="form-control" autocomplete="off" id="stock">
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button onclick="destoryAddGoodsModal()" class="btn btn-danger">取消</button>
                                <button class="btn btn-success" onclick="addGoods()">确认</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 尾部页面 -->

        </div>
    </div>
    </div>
    
    <!-- jquery
    ============================================ -->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <!-- bootstrap JS
    ============================================ -->
    <script src="js/bootstrap.min.js"></script>
    <!-- wow JS  动画效果js
    ============================================ -->
    <script src="js/wow.min.js"></script>
    <!-- price-slider JS
    ============================================ -->
    <script src="js/jquery-price-slider.js"></script>
    <!-- meanmenu JS
    ============================================ -->
    <script src="js/jquery.meanmenu.js"></script>
    <!-- owl.carousel JS
    ============================================ -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- sticky JS
    ============================================ -->
    <script src="js/jquery.sticky.js"></script>
    <!-- scrollUp JS
    ============================================ -->
    <script src="js/jquery.scrollUp.min.js"></script>
    <!-- counterup JS
    ============================================ -->
    <script src="js/counterup/jquery.counterup.min.js"></script>
    <script src="js/counterup/waypoints.min.js"></script>
    <script src="js/counterup/counterup-active.js"></script>
    <!-- mCustomScrollbar JS
    ============================================ -->
    <script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/scrollbar/mCustomScrollbar-active.js"></script>
    <!-- metisMenu JS
    ============================================ -->
    <script src="js/metisMenu/metisMenu.min.js"></script>
    <script src="js/metisMenu/metisMenu-active.js"></script>
    
    
    <script src="js/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/sparkline/jquery.charts-sparkline.js"></script>
    <script src="js/sparkline/sparkline-active.js"></script>
    <!-- calendar JS
    ============================================ -->
    <script src="js/calendar/moment.min.js"></script>
    
    <script src="js/calendar/fullcalendar.min.js"></script>
    <script src="js/calendar/fullcalendar-active.js"></script>
    <!-- plugins JS
    ============================================ -->
    <script src="js/plugins.js"></script>
    <!-- main JS
    ============================================ -->
    <script src="js/main.js"></script>
    
    <!-- tawk chat JS  聊天系统js
    <script src="js/tawk-chat.js"></script>
    ============================================ -->
    
    <script src="js/data-table/bootstrap-table.js"></script>
    <script src="js/data-table/bootstrap-table-zh-CN.js"></script>
    
    <script src="js/notifications/Lobibox.js"></script>
    <script src="js/datepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    
    </body>

    </html>
<script>

    // 销毁表格, 然后影藏模态窗
    function destoryshowLogin() {
        $('#showLogin').modal('hide');
        // 因为模态窗中的表格, 没有分页，所以将数据直接缓存在客户端，当重新请求的时候并不会发送网络请求，
        // 导致看不同用户的收货地址的时候, 看到的数据是上一次的，所以每次影藏要将表格销毁掉。
        // https://www.bootstrap-table.com.cn/doc/api/methods/#destroy
        $('#showLoginclose').bootstrapTable('destroy'); // destroy是固定值
    }



    // 点击 “确认导入” 按钮
    function sureImportExcel() {

        var fileBtn = document.getElementById('fileBtn');
        var file = fileBtn.files[0]; //获取要上传的文件

        $('body').mLoading('show');

        // $('body').mLoading({
        //     text: "正在导入中...", //加载文字，默认值：加载中...
        //     mask: true //是否显示遮罩效果，默认显示
        // });

        // FormData是 H5新增的对象，主要用于异步文件上传
        var formData = new FormData();
        formData.append("userExcel", file); //

        $.ajax({
            url: 'http://localhost:8080/Goods/import',
            type: 'post',
            dataType: 'json',
            // 因为默认的 contentType是 application/x-www-form-urlencoded, 设置false目的是将 FormData 直接丢上去。
            contentType: false,
            data: formData,
            // 数据不作任何的处理
            processData: false,
            success: function (_data) {
                fileBtn.value = '';
                $('#importFileName').val('')
                $('body').mLoading('hide'); //隐藏加载框
                if (_data.code > 0) {
                    alert('导入成功');
                    $('#dataTable').bootstrapTable('selectPage', 1);
                } else {
                    alert('导入失败')
                }
            }
        })
    }

    $('#goodsDataTable').bootstrapTable({
        url: 'http://localhost:8080/Goods',
        method: 'GET',
        columns: [
            // field是返回rows中每个对象的属性名
            {title: '类型', field: 'type', align: 'center',},
            {title: '商品编号', field: 'goodId', align: 'center'},
            {title: '描述信息', field: 'title', align: 'center', formatter: formatTitle },
            {title: '价格', field: 'price', align: 'center'},
            {title: '状态', field: 'status', align: 'center', formatter: formatStatus},
            {title: '库存', field: 'stock', align: 'center'},
            {title: '创建日期', field: 'createTime', align: 'center',formatter: formatTime},
            {title: '更新日期', field: 'updateTime', align: 'center',formatter: formatTime},
            {title: '操作', align: 'center', formatter: addProcessBtn}
        ],

        sidePagination: 'server',
        pagination: true //表示使用分页

    })


    function formatTitle(value) {
        var length = value.length; //获取文本长度
        if(length > 30) {
            return value.substring(0, 31) + '...';
        }
        return value;
    }

    // 格式化商品的状态
    function formatStatus(value) {
        if(value == 1) {
            return '<span class="label label-success">可用</span>'
        }
        return '<span class="label label-warning">不可用</span>'
    }

    //格式化日期
    function formatTime(t){

        var date = new Date(t);

        Y = date.getFullYear() + '-';

        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';

        D = date.getDate() + ' ';

        h = date.getHours() + ':';

        m = date.getMinutes() + ':';

        s = date.getSeconds();

        return Y+M+D+h+m+s;

    }
    // 添加操作按钮
    function addProcessBtn(value, row) {
        var goodsId = row.id;
        return '<button onclick="deleteGoods(' + goodsId + ')" class="btn btn-danger btn-xs">删除</button>'
    }


    // 删除对应的商品，实际就是改状态
    function deleteGoods(goodsId) {
        if (confirm("是否删除该商品?")){
            $.ajax({
                url: 'http://localhost:8080/Goods/'+goodsId,
                dataType: 'json',
                type: 'delete',
                success: function(_data) {
                    // 表示删除成功，更新表格
                    if(_data.code > 0) {
                        $('#goodsDataTable').bootstrapTable('refresh');
                    }else { // 删除失败，给用户一个提示
                        showErrorBox('删除失败, 请联系管理员.')
                    }
                }
            })
        }

    }


    function showAddGoodsModal() {
        var items = $('#items');
        items.empty(); //清空种类的下拉列表

        /**
         * 第一个参数url地址
         * 第二个参数是请求的参数
         * 第三个参数是回调方法。
         */
        $.getJSON('http://localhost:8080/Items', {}, function(_data){
            for(var i = 0; i < _data.length; i++){
                var item = _data[i];
                // <option value="3#shoes">鞋子</option>

                items.append('<option value="' + (item.id + '#' + item.alias)+ '">' + item.name + '</option>')
            }
        });

        $('#addGoodsModal').modal('show');
    }
    // 隐藏模态框
    function destoryAddGoodsModal() {
        resetModal();
        $('#addGoodsModal').modal('hide');
    }

    //图片回显
    function uploadDispalyImage(fileTag) {

        var item = $('#items').val(); //取种类的值，目的是上传的文件放在哪个目录下

        var itemAlias = item.split('#')[1];


        var displayImage = fileTag.files[0];
        // console.log(displayImage.name)  //文件的名字，在很多网站中要去判断文件的格式是否正确，要通过后缀来判断
        // console.log(displayImage.size); // 文件的大小，单位是字节，如果要判断多少 M, size / (1024 * 1024) 结果单位就位M
        var name = displayImage.name;

        let file = $(fileTag)[0].files[0];
        $('#append-small-btn').val(name);

        var formData = new FormData();
        formData.append("avatar",file)
        formData.append('itemAlias', itemAlias);

        $.ajax({
            url: 'http://localhost:8080/upload',
            type: 'post',
            dataType: 'json',
            data: formData,
            /**
             * 内容类型。默认值：application/x-www-form-urlencoded;
             * false表示不设置，将FormData原封不动的直接提价服务器端
             */
            contentType: false,
            /**
             * processData 处理数据， 例如get请求，会将data中的数据，name=张三&password=125,
             * 对于FormData包含文件，此处要为false, 禁止转换
             */
            processData: false,
            success: function(_data) {
                // {"filePath":"mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg","imageUrl":"http://localhost/mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg"}
                $('#preDisplayImage').prop('src', _data.imageUrl);  //回显图片
                $('#imageServerPath').val(_data.filePath);
            }
        })
    }

    // 关闭模态框的时候，重置所有的信息
    function resetModal() {
        $('#imageServerPath').val('');
        $('#items').empty();
        $('#append-small-btn').val('');
        $('#preDisplayImage').prop('src', '../images/default.png');

        $('#title').val('');
        $('#price').val('');
        $('#stock').val('');
        $('#displayImage').val('');
    }

    // 添加商品
    function addGoods() {
        var imageServerPath = $('#imageServerPath').val();  //商品的路径
        var item = $('#items').val(); // 1#books 种类
        var itemId = item.split('#')[0]; //获取种类的id
        var price = $('#price').val();  //价格
        var stock = $('#stock').val();
        var title = $('#title').val();

        // 构建请求的参数
        var requestParams = {
            imageSrc: imageServerPath,
            type: itemId,
            price: price,
            stock: stock,
            title: title,
        };

        $.post('http://localhost:8080/Goods', requestParams, function(_data) {
            if(_data.code > 0) {
                destoryAddGoodsModal(); //销毁添加商品模态框
                $('#goodsDataTable').bootstrapTable('refresh');
            }else {
                showErrorBox('添加商品失败，请联系管理员.')
            }
        }, 'json');
    }


    //导出商品
    function exportFile(){
        if (confirm("是否导出商品?")){
            $.ajax({
                url: 'http://localhost:8080/Goods/export?',
                dataType: 'json',
                type: 'get',
                success: function(_data) {
                    // 表示导出成功，更新表格
                    if(_data.code == 1) {
                        alert('导出商品');
                        $('#goodsDataTable').bootstrapTable('refresh');
                    }else { // 删除失败，给用户一个提示
                       alert('删除失败, 请联系管理员.')
                    }
                }
            })
        }
    }

    // // 导出Excel, 说白就是下载
    // function excelExport() {
    //
    //     // 前提是 form必须有名字
    //     // name=fef&gender=M&begin=2020-10-13&end=2020-10-21&companyId=1
    //     var searchContent = $('#searchForm').serialize();
    //     location.href = 'http://localhost:8080/user/export?' + searchContent
    // }
    function loginOut(){

        $.ajax({
            url:'http://localhost:8080/sysUser/loginOut',
            method:'get',
            success:function (_data) {
                alert(_data.msg);
                $.cookie('frontedUsername','',path='/');
                window.location="/shop/login.html";
            }

        })
    }
    $('#admin-name').hide();
    $('#admin-nam2').html('欢迎你'+$.cookie('frontedUsername'));
</script>
    